<template>
  <scroll-view class="rank-list" scroll-x>
    <RankItem title="荣誉排行榜" :list="state.data.honorRankList" />
    <RankItem title="科研排行榜" :list="state.data.scienceRankList" />
    <RankItem title="教研排行榜" :list="state.data.researchRankList" />
    <RankItem title="勋章排行榜" :list="state.data.medalRankList" />
  </scroll-view>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from "vue";
import RankItem from "../rank-item/index.vue";

const state = reactive<any>({
  data: {},
});

onMounted(async () => {
  const resp = await uni.request({
    url: "/api/demo/ai/rank",
    method: "GET",
    header: {
      Authorization:
        "zbc9OcEN64dknFRio2acnSthDCpg99XjU7xdYO1FcrHZNqXmClbJZAYJKUlWSt1kqM",
    },
  });

  // 解构 code data msg
  const { code, msg, data } = resp.data;

  // 判断业务状态码
  if (code !== 0) {
    uni.showToast({ icon: "none", title: msg });
    return;
  }

  state.data = data;

  console.log("resp", data);
});
</script>

<style lang="scss">
.rank-list {
  white-space: nowrap;
}
</style>
